<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>金融市场模拟器</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-financial"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>金融市场模拟器</h1>
            <div class="controls">
                <button id="startBtn">开始模拟</button>
                <button id="stopBtn">停止模拟</button>
                <button id="resetBtn">重置市场</button>
            </div>
        </header>

        <main>
            <section class="config-section">
                <h2>市场参数配置</h2>
                <div class="config-grid">
                    <div class="config-item">
                        <label for="timeStep">时间步长:</label>
                        <input type="number" id="timeStep" min="1" max="10" value="1">
                    </div>
                    <div class="config-item">
                        <label for="macroEventProbability">宏观事件概率:</label>
                        <input type="number" id="macroEventProbability" min="0" max="1" step="0.01" value="0.1">
                    </div>
                    <div class="config-item">
                        <label for="investorEntryRate">投资者入场率:</label>
                        <input type="number" id="investorEntryRate" min="0" max="1" step="0.01" value="0.2">
                    </div>
                </div>
                
                <h3>止盈止损配置</h3>
                <div class="config-grid">
                    <div class="config-item">
                        <label for="takeProfitProbability">止盈概率:</label>
                        <input type="number" id="takeProfitProbability" min="0" max="1" step="0.01" value="0.3">
                    </div>
                    <div class="config-item">
                        <label for="stopLossProbability">止损概率:</label>
                        <input type="number" id="stopLossProbability" min="0" max="1" step="0.01" value="0.4">
                    </div>
                    <div class="config-item">
                        <label for="takeProfitThreshold">止盈阈值:</label>
                        <input type="number" id="takeProfitThreshold" min="0" max="1" step="0.01" value="0.15">
                    </div>
                    <div class="config-item">
                        <label for="stopLossThreshold">止损阈值:</label>
                        <input type="number" id="stopLossThreshold" min="0" max="1" step="0.01" value="0.10">
                    </div>
                </div>
                
                <h3>投资者类型权重配置</h3>
                <div class="config-grid">
                    <div class="config-item">
                        <label for="retailWeight">散户投资者权重:</label>
                        <input type="number" id="retailWeight" min="0" max="1" step="0.01" value="0.7">
                    </div>
                    <div class="config-item">
                        <label for="marketMakerWeight">做市商权重:</label>
                        <input type="number" id="marketMakerWeight" min="0" max="1" step="0.01" value="0.2">
                    </div>
                    <div class="config-item">
                        <label for="institutionalWeight">机构投资者权重:</label>
                        <input type="number" id="institutionalWeight" min="0" max="1" step="0.01" value="0.1">
                    </div>
                </div>
                
                <h3>策略分布配置</h3>
                <div class="strategy-config">
                    <h4>散户投资者策略分布</h4>
                    <div class="config-grid">
                        <div class="config-item">
                            <label for="retailRandomWeight">随机策略权重:</label>
                            <input type="number" id="retailRandomWeight" min="0" max="1" step="0.01" value="0.4">
                        </div>
                        <div class="config-item">
                            <label for="retailTrendWeight">趋势跟踪策略权重:</label>
                            <input type="number" id="retailTrendWeight" min="0" max="1" step="0.01" value="0.3">
                        </div>
                        <div class="config-item">
                            <label for="retailMeanWeight">均值回归策略权重:</label>
                            <input type="number" id="retailMeanWeight" min="0" max="1" step="0.01" value="0.2">
                        </div>
                        <div class="config-item">
                            <label for="retailGamblerWeight">赌博策略权重:</label>
                            <input type="number" id="retailGamblerWeight" min="0" max="1" step="0.01" value="0.1">
                        </div>
                        <div class="config-item">
                            <label for="retailHerdWeight">羊群效应策略权重:</label>
                            <input type="number" id="retailHerdWeight" min="0" max="1" step="0.01" value="0.0">
                        </div>
                    </div>
                    
                    <h4>机构投资者策略分布</h4>
                    <div class="config-grid">
                        <div class="config-item">
                            <label for="institutionalTrendWeight">趋势跟踪策略权重:</label>
                            <input type="number" id="institutionalTrendWeight" min="0" max="1" step="0.01" value="0.5">
                        </div>
                        <div class="config-item">
                            <label for="institutionalMeanWeight">均值回归策略权重:</label>
                            <input type="number" id="institutionalMeanWeight" min="0" max="1" step="0.01" value="0.5">
                        </div>
                    </div>
                </div>
                
                <h3>初始投资者人数配置</h3>
                <div class="config-grid">
                    <div class="config-item">
                        <label for="initialRetailCount">初始散户人数:</label>
                        <input type="number" id="initialRetailCount" min="0" max="100" value="2">
                    </div>
                    <div class="config-item">
                        <label for="initialMarketMakerCount">初始做市商人数:</label>
                        <input type="number" id="initialMarketMakerCount" min="0" max="100" value="1">
                    </div>
                    <div class="config-item">
                        <label for="initialInstitutionalCount">初始机构投资者人数:</label>
                        <input type="number" id="initialInstitutionalCount" min="0" max="100" value="1">
                    </div>
                </div>
                
                <h3>初始资本配置</h3>
                <div class="config-grid">
                    <div class="config-item">
                        <label for="retailCapital">散户初始资本:</label>
                        <input type="number" id="retailCapital" min="1000" max="1000000" step="1000" value="50000">
                    </div>
                    <div class="config-item">
                        <label for="marketMakerCapital">做市商初始资本:</label>
                        <input type="number" id="marketMakerCapital" min="100000" max="10000000" step="100000" value="1000000">
                    </div>
                    <div class="config-item">
                        <label for="institutionalCapital">机构投资者初始资本:</label>
                        <input type="number" id="institutionalCapital" min="1000000" max="100000000" step="1000000" value="5000000">
                    </div>
                </div>
                
                <!-- 新增资产配置部分 -->
                <h3>资产配置</h3>
                <div class="asset-config-section">
                    <div class="asset-config-item">
                        <h4>资产1 (AAPL)</h4>
                        <div class="config-grid">
                            <div class="config-item">
                                <label for="aaplInitialPrice">初始价格:</label>
                                <input type="number" id="aaplInitialPrice" min="0.01" step="0.01" value="150.00">
                            </div>
                            <div class="config-item">
                                <label for="aaplTotalShares">总份数:</label>
                                <input type="number" id="aaplTotalShares" min="1000" step="1000" value="1000000">
                            </div>
                            <div class="config-item">
                                <label for="aaplInstitutionalCapital">控股机构资本:</label>
                                <input type="number" id="aaplInstitutionalCapital" min="1000000" step="1000000" value="10000000">
                            </div>
                            <div class="config-item">
                                <label for="aaplInstitutionalShares">控股机构持有份数:</label>
                                <input type="number" id="aaplInstitutionalShares" min="1000" step="1000" value="1000000">
                            </div>
                        </div>
                    </div>
                    
                    <div class="asset-config-item">
                        <h4>资产2 (GOOG)</h4>
                        <div class="config-grid">
                            <div class="config-item">
                                <label for="googInitialPrice">初始价格:</label>
                                <input type="number" id="googInitialPrice" min="0.01" step="0.01" value="2500.00">
                            </div>
                            <div class="config-item">
                                <label for="googTotalShares">总份数:</label>
                                <input type="number" id="googTotalShares" min="1000" step="1000" value="1000000">
                            </div>
                            <div class="config-item">
                                <label for="googInstitutionalCapital">控股机构资本:</label>
                                <input type="number" id="googInstitutionalCapital" min="1000000" step="1000000" value="10000000">
                            </div>
                            <div class="config-item">
                                <label for="googInstitutionalShares">控股机构持有份数:</label>
                                <input type="number" id="googInstitutionalShares" min="1000" step="1000" value="1000000">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="config-grid">
                    <div class="config-item">
                        <button id="updateConfigBtn">更新配置</button>
                        <button id="autoFillBtn">自动填充推荐值</button>
                    </div>
                </div>
            </section>

            <section class="market-info">
                <h2>市场概览</h2>
                <div class="info-grid">
                    <div class="info-card">
                        <h3>时间</h3>
                        <p id="time">0</p>
                    </div>
                    <div class="info-card">
                        <h3>投资者总数</h3>
                        <p id="totalInvestors">0</p>
                    </div>
                    <div class="info-card">
                        <h3>破产投资者数</h3>
                        <p id="bankruptInvestors">0</p>
                    </div>
                    <div class="info-card">
                        <h3>资产总数</h3>
                        <p id="totalAssets">0</p>
                    </div>
                </div>
            </section>

            <section class="assets">
                <h2>资产价格</h2>
                <div id="assetsContainer" class="assets-container">
                    <!-- 资产信息将通过JavaScript动态添加 -->
                </div>
            </section>

            <section class="charts">
                <h2>资产图表</h2>
                <div class="chart-container">
                    <div class="chart-wrapper">
                        <h3>Apple Inc. (AAPL) K线图</h3>
                        <canvas id="aaplChart"></canvas>
                    </div>
                    <div class="chart-wrapper">
                        <h3>Alphabet Inc. (GOOG) K线图</h3>
                        <canvas id="googChart"></canvas>
                    </div>
                </div>
            </section>

            <section class="volume-heatmap">
                <h2>交易量热力图</h2>
                <div class="heatmap-container">
                    <div class="heatmap-wrapper">
                        <h3>买入量</h3>
                        <canvas id="buyVolumeChart"></canvas>
                    </div>
                    <div class="heatmap-wrapper">
                        <h3>卖出量</h3>
                        <canvas id="sellVolumeChart"></canvas>
                    </div>
                </div>
            </section>

            <section class="investors">
                <h2>投资者统计</h2>
                <div id="investorsContainer" class="investors-container">
                    <!-- 投资者统计将通过JavaScript动态添加 -->
                </div>
            </section>

            <section class="events">
                <h2>活跃宏观事件</h2>
                <div id="eventsContainer" class="events-container">
                    <!-- 宏观事件将通过JavaScript动态添加 -->
                </div>
            </section>
        </main>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script src="js/main.js"></script>
</body>
</html>